<template>
    <div class="HomeWork_div" v-if="msg!==null">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="$router.go(-1)" clickMusic='true'>
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>巡查任务</span>
                </div>
                <!--<div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" @click="refresh" />
                </div>-->
            </TitleMenu>
        </div>
        <div class="content_104class" id="FloodPatrolDetail_content" >
            <a-row class="FloodPatrolDetail_item_row1"  >
                <a-col :span="24" class="FloodPatrolDetail_col_left" >
                    防洪短信
                </a-col>
                <a-col :span="24" class="FloodPatrolDetail_col_right">
                    【{{msg.message.officeName}}】 {{new Date(Date.parse(msg.message.timeHappened)) | formatDate}} 雨量测试工程工务段
                    {{msg.message.lineName}}线{{msg.message.floodsPointName}}达到{{msg.message.warningLevel}}警戒(1h):小时雨量{{msg.message.rainfallOne}},
                    24时雨量{{msg.message.rainfallTwentyFour}},连续雨量{{msg.message.rainfallDuration}}
                </a-col>
            </a-row>
            <a-row class="FloodPatrolDetail_item_row1"  >
                <a-col :span="9" class="FloodPatrolDetail_col_left" >
                    雨量控制点:
                </a-col>
                <a-col :span="15" class="FloodPatrolDetail_col_right">
                    {{msg.message.floodsPointName}}
                </a-col>
            </a-row>

            <a-row class="FloodPatrolDetail_item_row1"  >
                <a-col :span="7" class="FloodPatrolDetail_col_left" >
                    巡查范围:
                </a-col>
                <a-col :span="17" class="FloodPatrolDetail_col_right" style="font-size: 5vw">
                    {{msg.message.lineName}}线
                    K{{((msg.point.startKM)*1000).toString().substring(0,3)}}+{{((msg.point.startKM)*1000).toString().substring(3)}}~K{{((msg.point.endKM)*1000).toString().substring(0,3)}}+{{((msg.point.endKM)*1000).toString().substring(3)}}
                </a-col>
            </a-row>

            <a-row class="FloodPatrolDetail_item_row1"  >
                <a-col :span="14" class="FloodPatrolDetail_col_left" >
                    限定巡查完成时间:
                </a-col>
                <a-col :span="8" class="FloodPatrolDetail_col_right">
                    {{msg.point.monitorFinish}}分钟
                </a-col>
            </a-row>
           <a-row id="FloodPatrolDetail_info_row">
               <a-col :span="24" class="FloodPatrolDetail_item_col1">
                   <a-button :size="size"class="FloodPatrolDetail_button"  @click="$router.push('/floodPatrol/infoReport')" clickMusic='true'>资料上报</a-button>
               </a-col>
           </a-row>
        </div>
        <FooterChaanel></FooterChaanel>
    </div>
</template>
<style>
    #FloodPatrolDetail_content{
       /* background: rgb(237,237,237);*/
        height: calc(100vh - 66vw);
        width: 100vw;
        overflow: auto;
        generic-family: Microsoft Yahei;
    }
    .FloodPatrolDetail_col_left{
        line-height: 10vw;
        font-size: 6vw;
        font-weight: bold;
        color: black;
        text-align: left;

    }
    .FloodPatrolDetail_col_right{
        line-height: 10vw;
        font-size: 6vw;
        font-weight: normal;
        color: black;
        text-align: left;
    }
    .FloodPatrolDetail_item_row1{
        generic-family: Microsoft Yahei;
        background: white;
        margin: 0 0 2vw 0;
        padding:  0 0 0 2vw;
    }
    #FloodPatrolDetail_info_row{
        margin: 3vw 0 0 0;
        width: 100vw;
        height: 14vw;
        line-height: 14vw;
    }
    .FloodPatrolDetail_item_col1{
        line-height: 14vw;
        text-align: center;
    }

    .FloodPatrolDetail_time_col1{
        color:black;
        padding: 0 0 0 2vw;
    }

    .Group_ico{
        font-size: 7vw;
    }
</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import {mapState} from 'vuex'; //先要引入
    export default {
        name: "FloodPatrolDetail",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        inject:['reload'],
        mounted(){
                this.getRouterParam();

        },
        data() {
            return {
                msg:null,
                size: 'large',
            }
        },
        computed: {

            ...mapState({
                floodsMessage: state => state.floodsMessage,
            }),
        },
        methods:{
            getRouterParam(){
                console.log(this.$route.params.msg);
                if(typeof(this.$route.params.msg)==="undefined"||this.$route.params.msg===""){
                    this.msg = JSON.parse(localStorage.getItem("floodsMsg"));
                }else{
                    this.msg = this.$route.params.msg;
                    localStorage.setItem("floodsMsg",JSON.stringify(this.msg));
                }
            },
            refresh(){
                this.reload();
            },
        }
    }
</script>

